<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> 
  <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.css" /> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.js"></script> 
  <script src="http://cdn.gbtags.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script> 
  <script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script> 
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //--> 
  <div id="container"> 
   <!-- 定义一个表格元素 --> 
   <button id="redraw">更换数据源</button> 
   <table id="example" class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>序号</th> 
      <th>标题</th> 
      <th>连接</th> 
     </tr> 
    </thead> 
    <tbody></tbody> 
    <tfoot> 
     <tr> 
      <th></th> 
      <th>序号</th> 
      <th>标题</th> 
      <th>连接</th> 
     </tr> 
    </tfoot> 
    <!-- tbody是必须的 --> 
   </table> 
  </div> 
  <script> 
	/*Javascript代码片段*/
var t = $('#example').DataTable({
    ajax: {
        //指定数据源
        url: "/jbase/user/query.do",
        dataSrc:function (json){
			return json.data.data;
		}
    },
    "bProcessing":true,
	"bServerSide" : true,
    //每页显示三条数据
    pageLength: 3,
    columns: [{
        "data": null //此列不绑定数据源，用来显示序号
    },
    {
        "data": "username"
    },
    {
        "data": "fullName"
    },
    {
        "data": "createTime"
    }]
    

});

//前台添加序号
t.on('order.dt search.dt',
function() {
    t.column(0, {
        "search": 'applied',
        "order": 'applied'
    }).nodes().each(function(cell, i) {
        cell.innerHTML = i + 1;
    });
}).draw();

  </script>
</body>
</html>